<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 主要内容区域 -->
    <main class="container mx-auto px-6 py-8">
      <!-- 筛选区域 -->
      <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <div class="flex flex-wrap items-center justify-between gap-4">
          <div class="w-full md:w-96">
            <label class="block text-sm font-medium text-gray-700 mb-2">基金产品</label>
            <el-select
              v-model="selectedFund"
              filterable
              placeholder="请选择基金产品"
              class="w-full !rounded-button"
              @change="handleFundChange"
            >
              <el-option
                v-for="item in fundOptions"
                :key="item.id"
                :label="`${item.fundcode} ${item.fundname}`"
                :value="item.fundcode"
              >
                <div class="flex flex-col">
                  <span class="text-gray-900">{{ item.fundname }}</span>
                  <span class="text-xs text-gray-500">{{ item.fundcode }}</span>
                </div>
              </el-option>
            </el-select>
          </div>
          <div class="w-full md:w-auto flex flex-wrap gap-4">
            <div class="w-full md:w-auto">
              <label class="block text-sm font-medium text-gray-700 mb-2">时间范围</label>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="-"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="!rounded-button whitespace-nowrap"
              />
            </div>
            <div class="w-full md:w-auto flex items-end">
              <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="handleSearch">
                <el-icon class="mr-1">
                  <Search/>
                </el-icon>
                查询
              </el-button>
              <el-button class="ml-2 !rounded-button whitespace-nowrap" @click="handleReset">
                <el-icon class="mr-1">
                  <RefreshRight/>
                </el-icon>
                重置
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 基金概览卡片 -->
      <div v-if="selectedFund" class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <div class="flex flex-wrap justify-between">
          <div class="w-full md:w-1/2 lg:w-1/3 mb-4 md:mb-0">
            <div class="flex items-center">
<!--              <div class="w-16 h-16 rounded-lg bg-blue-50 flex items-center justify-center mr-4">-->
<!--                <img :src="fundImage" alt="基金图标" class="w-10 h-10 object-contain"/>-->
<!--              </div>-->
              <div>
                <h2 class="text-xl font-semibold text-gray-800">{{ currentFund.fundName }}</h2>
                <h3 class="text-xl font-semibold text-gray-800">{{ currentFund.fundEnglishName }}</h3>
                <p class="text-gray-500">{{ currentFund.fundCode }}</p>
              </div>
            </div>
          </div>
          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full md:w-1/2 lg:w-2/3">
            <div class="bg-blue-50 rounded-lg p-4">
              <p class="text-sm text-gray-500">当前状态</p>
              <p class="text-lg font-semibold" :class="getStatusColor(currentFund.fundStatus)">
                {{ currentFund.fundStatus }}
              </p>
            </div>
            <div class="bg-blue-50 rounded-lg p-4">
              <p class="text-sm text-gray-500">成立日期</p>
              <p class="text-lg font-semibold text-gray-800">{{`${currentFund.fundIntendDate.slice(0, 4)}-${currentFund.fundIntendDate.slice(4, 6)}-${currentFund.fundIntendDate.slice(6, 8)}`}}</p>
            </div>
            <div class="bg-blue-50 rounded-lg p-4">
              <p class="text-sm text-gray-500">募集金额</p>
              <p class="text-lg font-semibold text-gray-800">{{ proxy.formatCurrency(currentFund.subAmountLast) }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 时间轴内容区域 -->
      <div v-if="selectedFund" class="bg-white rounded-lg shadow-sm p-6">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-semibold text-gray-800">产品生命周期</h2>
          <div class="flex space-x-2">
            <el-button
              type="primary"
              plain
              :class="{'bg-blue-50': timelineView === 'all'}"
              class="!rounded-button whitespace-nowrap"
              @click="timelineView = 'all'"
            >
              全部
            </el-button>
            <el-button
              type="primary"
              plain
              style="color: #3B82F6"
              :class="{'bg-blue-50': timelineView === 'manager'}"
              class="!rounded-button whitespace-nowrap"
              @click="timelineView = 'manager'"
            >
              基金经理
            </el-button>
            <el-button
              type="primary"
              plain
              style="color: #10B981"
              :class="{'bg-blue-50': timelineView === 'nav'}"
              class="!rounded-button whitespace-nowrap"
              @click="timelineView = 'fund'"
            >
              基金产品
            </el-button>
            <el-button
              type="primary"
              plain
              style="color: #8B5CF6"
              :class="{'bg-blue-50': timelineView === 'sales'}"
              class="!rounded-button whitespace-nowrap"
              @click="timelineView = 'sales'"
            >
              销售信息
            </el-button>
<!--            <el-button-->
<!--              type="primary"-->
<!--              plain-->
<!--              :class="{'bg-blue-50': timelineView === 'status'}"-->
<!--              class="!rounded-button whitespace-nowrap"-->
<!--              @click="timelineView = 'status'"-->
<!--            >-->
<!--              状态变更-->
<!--            </el-button>-->
          </div>
        </div>
        <div class="timeline-container relative">
          <el-timeline>
            <el-timeline-item
              v-for="(event, index) in filteredTimelineEvents"
              :key="index"
              :type="getEventType(event.type)"
              :color="getEventColor(event.type)"
              :timestamp="event.date"
              :hollow="event.hollow"
            >
              <div
                class="timeline-card p-4 rounded-lg border transition-all duration-200 hover:shadow-md"
                :class="getEventBorderClass(event.type)"
              >
                <div class="flex items-start">
                  <div
                    class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                    :class="getEventBgClass(event.type)"
                  >
                    <el-icon :class="getEventIconClass(event.type)">
                      <component :is="getEventIcon(event.type)"/>
                    </el-icon>
                  </div>
                  <div class="flex-1">
                    <h3 class="text-base font-medium text-gray-800">{{ event.milestone }}</h3>
<!--                    <p class="text-sm text-gray-600 mt-1">{{ event.description }}</p>-->
                    <!-- 基金经理信息 -->
                    <div v-if="event.type === 'manager'" class="mt-3 bg-gray-50 p-3 rounded-lg">
                      <div class="flex items-center">
                        <img :src="event.managerPhoto" alt="基金经理照片"
                             class="w-12 h-12 rounded-full object-cover mr-3"/>
                        <div>
                          <p class="font-medium">{{ event.managerName }}</p>
                          <p class="text-sm text-gray-500">{{ event.managerTitle }}</p>
                        </div>
                      </div>
                      <p class="text-sm mt-2">{{ event.description }}</p>
                    </div>
                    <div v-if="event.type === 'fund'" class="mt-3">
                      <div class="grid grid-cols-2 gap-3">
                        <div class="bg-gray-50 p-3 rounded-lg">
                          <p class="text-sm text-gray-500">基金状态：{{ event.fundStatus }}</p>
                          <p class="text-lg font-semibold">{{ event.description }}</p>
                        </div>
                      </div>
                    </div>
                    <div v-if="event.type === 'sales'" class="mt-3">
                      <div class="bg-gray-50 p-3 rounded-lg">
                        <div class="flex justify-between">
                          <div>
                            <p class="font-medium">{{ event.distributorName }}</p>
                            <p class="text-sm text-gray-500">{{ event.distributorWeb }}</p>
                          </div>
                          <div class="text-right">
                            <p class="font-medium">{{ event.distributorType }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 未选择基金时的提示 -->
      <div v-if="!selectedFund" class="bg-white rounded-lg shadow-sm p-10 text-center">
        <h3 class="text-xl font-medium text-gray-700 mb-2">请选择基金产品</h3>
        <p class="text-gray-500 mb-1">选择基金产品后，将展示该产品的完整生命周期信息</p>
<!--        <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="scrollToSelect">-->
<!--          选择基金-->
<!--        </el-button>-->
      </div>
    </main>
  </div>
</template>
<script lang="ts" setup name="lifecycle">
import {ref, computed} from 'vue';
import {oneProduct,listProduct} from '@/api/system/product/lifecycle'
import {
  DataLine, User, Search, RefreshRight, ArrowRight,
  User as UserIcon, Histogram, Shop, TrendCharts, InfoFilled
} from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance();

// 基金选择相关
const selectedFund = ref('');
const dateRange = ref([]);
// 时间轴视图过滤
const timelineView = ref('all');
// 基金选项
const fundOptions = ref([]);
const currentFund = ref('');
// 根据视图过滤时间轴事件
const filteredTimelineEvents = computed(() => {
  if (timelineView.value === 'all') {
    return currentFund.value.timeLineEvenVos
      // .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
  } else {
    return currentFund.value.timeLineEvenVos
      .filter(event => event.type === timelineView.value)
      // .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
  }
});
// 获取事件类型对应的图标
const getEventIcon = (type: string) => {
  switch (type) {
    case 'manager':
      return UserIcon;
    case 'fund':
      return Histogram;
    case 'sales':
      return Shop;
    case 'status':
      return InfoFilled;
    default:
      return TrendCharts;
  }
};
// 获取事件类型对应的图标样式
const getEventIconClass = (type: string) => {
  switch (type) {
    case 'manager':
      return 'text-blue-600';
    case 'fund':
      return 'text-green-600';
    case 'sales':
      return 'text-purple-600';
    case 'status':
      return 'text-orange-600';
    default:
      return 'text-gray-600';
  }
};
// 获取事件类型对应的背景样式
const getEventBgClass = (type: string) => {
  switch (type) {
    case 'manager':
      return 'bg-blue-100';
    case 'fund':
      return 'bg-green-100';
    case 'sales':
      return 'bg-purple-100';
    case 'status':
      return 'bg-orange-100';
    default:
      return 'bg-gray-100';
  }
};
// 获取事件类型对应的边框样式
const getEventBorderClass = (type: string) => {
  switch (type) {
    case 'manager':
      return 'border-blue-200 hover:border-blue-300';
    case 'fund':
      return 'border-green-200 hover:border-green-300';
    case 'sales':
      return 'border-purple-200 hover:border-purple-300';
    case 'status':
      return 'border-orange-200 hover:border-orange-300';
    default:
      return 'border-gray-200 hover:border-gray-300';
  }
};
// 获取事件类型对应的颜色
const getEventColor = (type: string) => {
  switch (type) {
    case 'manager':
      return '#3B82F6';
    case 'fund':
      return '#10B981';
    case 'sales':
      return '#8B5CF6';
    case 'status':
      return '#F59E0B';
    default:
      return '#6B7280';
  }
};
// 获取事件类型
const getEventType = (type: string) => {
  return '';
};
// 获取状态对应的颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case '停止交易':
      return 'text-orange-600';
    case '正常开放':
      return 'text-red-600';
    case '认购期':
      return 'text-red-600';
    default:
      return 'text-green-600';
  }
};


const getProducts = (param) => {
  oneProduct(param).then(res=>{
    console.log(res.data)
    currentFund.value = res.data
    console.log(currentFund.value)
  })
};
// 处理基金选择变更
const handleFundChange = (value) => {
  timelineView.value = 'all';
  console.log(value)
  const param = {
    "fundCode":value
  }
  getProducts(param);
};
// 处理搜索
const handleSearch = () => {
// 实际应用中这里会调用API获取数据
  console.log('搜索基金:', selectedFund.value, '日期范围:', dateRange.value);
  const param = {
    fundCode:selectedFund.value,
  }
  getProducts(proxy.addDateRange(param,dateRange.value));
};
// 处理重置
const handleReset = () => {
  selectedFund.value = '';
  dateRange.value = [];
  timelineView.value = 'all';
};
// 滚动到选择区域
const scrollToSelect = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};
const getProductList = ()=>{
  listProduct().then(res=>{
    console.log(">>>>>获取product列表>>>>>>>")
    console.log(res.data)
    fundOptions.value = res.data
    console.log(fundOptions.value)
  })
}

getProductList();
</script>
<style lang="scss" scoped>
.timeline-container {
  min-height: 500px;
}

/* 自定义时间轴样式 */
:deep(.el-timeline-item__tail) {
  border-left: 2px solid #e5e7eb;
}

:deep(.el-timeline-item__node--normal) {
  left: -2px;
  width: 14px;
  height: 14px;
}

:deep(.el-timeline-item__wrapper) {
  padding-left: 28px;
  margin-bottom: 25px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

/* 自定义下拉框样式 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  background-color: #ffffff;
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem;
}

:deep(.el-select .el-input__wrapper:hover) {
  border-color: #3b82f6 !important;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* 自定义日期选择器样式 */
:deep(.el-date-editor) {
  width: 100%;
}

:deep(.el-range-editor.el-input__wrapper) {
  background-color: #ffffff;
  box-shadow: none !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem;
}

:deep(.el-range-editor:hover) {
  border-color: #3b82f6 !important;
}

:deep(.el-range-editor.is-active) {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* 自定义按钮样式 */
:deep(.el-button) {
  font-weight: 500;
  transition: all 0.2s ease;
}

:deep(.el-button:not(.is-text)) {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

:deep(.el-button--primary) {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

:deep(.el-button--primary:hover) {
  background-color: #2563eb;
  border-color: #2563eb;
}

:deep(.el-button--primary.is-plain) {
  color: #3b82f6;
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

:deep(.el-button--primary.is-plain:hover) {
  color: #ffffff;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

/* 自定义时间轴卡片样式 */
.timeline-card {
  background-color: #ffffff;
  transition: all 0.2s ease;
}

.timeline-card:hover {
  transform: translateY(-2px);
}

/* 去除number input的箭头 */
:deep(input[type="number"]::-webkit-inner-spin-button),
:deep(input[type="number"]::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

/* 自定义滚动条样式 */
:deep(::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 3px;
}

:deep(::-webkit-scrollbar-thumb) {
  background: #c1c1c1;
  border-radius: 3px;
}

:deep(::-webkit-scrollbar-thumb:hover) {
  background: #a8a8a8;
}

/* 自定义下拉选项样式 */
:deep(.el-select-dropdown__item) {
  padding: 8px 12px;
}

:deep(.el-select-dropdown__item.hover) {
  background-color: #eff6ff;
}

:deep(.el-select-dropdown__item.selected) {
  background-color: #eff6ff;
  color: #3b82f6;
  font-weight: 500;
}
</style>
